<template>
  <div class="equipment-monitoring-container">
    <!-- 数据总览卡片 -->
    <el-row :gutter="20" class="data-overview">
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>设备总数</span>
              <el-tag type="info">台</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="number">{{ overview.totalCount }}</div>
            <div class="compare">
              <span>较上月</span>
              <span :class="overview.countTrend >= 0 ? 'up' : 'down'">
                {{ Math.abs(overview.countTrend) }}%
                <el-icon
                  ><component
                    :is="overview.countTrend >= 0 ? 'ArrowUp' : 'ArrowDown'"
                /></el-icon>
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>运行设备</span>
              <el-tag type="success">台</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="number">{{ overview.runningCount }}</div>
            <div class="rate">运行率：{{ overview.runningRate }}%</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>故障设备</span>
              <el-tag type="danger">台</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="number">{{ overview.faultCount }}</div>
            <div class="rate">故障率：{{ overview.faultRate }}%</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>设备效率</span>
              <el-tag type="warning">OEE</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="number">{{ overview.oeeValue }}%</div>
            <div class="compare">
              <span>较上月</span>
              <span :class="overview.oeeTrend >= 0 ? 'up' : 'down'">
                {{ Math.abs(overview.oeeTrend) }}%
                <el-icon
                  ><component
                    :is="overview.oeeTrend >= 0 ? 'ArrowUp' : 'ArrowDown'"
                /></el-icon>
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 运行状态监控 -->
    <el-row :gutter="20" class="monitor-section">
      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>设备运行状态</span>
              <el-radio-group v-model="monitorType" size="small">
                <el-radio-button label="list">列表</el-radio-button>
                <el-radio-button label="grid">网格</el-radio-button>
              </el-radio-group>
            </div>
          </template>

          <!-- 列表视图 -->
          <el-table
            v-if="monitorType === 'list'"
            :data="monitorData"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="equipmentCode"
              label="设备编码"
              width="120"
            />
            <el-table-column
              prop="equipmentName"
              label="设备名称"
              width="150"
            />
            <el-table-column prop="status" label="运行状态" width="100">
              <template #default="scope">
                <el-tag :type="getStatusType(scope.row.status)">
                  {{ getStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="runtime" label="运行时长" width="120" />
            <el-table-column prop="temperature" label="温度" width="100">
              <template #default="scope">
                {{ scope.row.temperature }}°C
              </template>
            </el-table-column>
            <el-table-column prop="speed" label="转速" width="100">
              <template #default="scope"> {{ scope.row.speed }}RPM </template>
            </el-table-column>
            <el-table-column prop="load" label="负载" width="100">
              <template #default="scope"> {{ scope.row.load }}% </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="150">
              <template #default="scope">
                <el-button link type="primary" @click="handleDetail(scope.row)"
                  >详情</el-button
                >
                <el-button link type="warning" @click="handleAlarm(scope.row)"
                  >报警</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- 网格视图 -->
          <div v-else class="grid-view">
            <el-card
              v-for="item in monitorData"
              :key="item.equipmentCode"
              class="grid-item"
              :class="item.status"
              shadow="hover"
            >
              <h3>{{ item.equipmentName }}</h3>
              <p>编码：{{ item.equipmentCode }}</p>
              <p>状态：{{ getStatusText(item.status) }}</p>
              <p>温度：{{ item.temperature }}°C</p>
              <p>转速：{{ item.speed }}RPM</p>
              <p>负载：{{ item.load }}%</p>
            </el-card>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>运行统计</span>
              <el-select v-model="chartTimeRange" size="small">
                <el-option label="今日" value="today" />
                <el-option label="本周" value="week" />
                <el-option label="本月" value="month" />
              </el-select>
            </div>
          </template>
          <div class="chart-container">
            <!-- 这里放置图表组件 -->
            <div class="chart-placeholder">图表区域</div>
          </div>
        </el-card>

        <el-card class="alarm-card">
          <template #header>
            <div class="card-header">
              <span>报警信息</span>
              <el-button type="primary" link>查看全部</el-button>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="(alarm, index) in alarmList"
              :key="index"
              :type="getAlarmType(alarm.level)"
              :timestamp="alarm.time"
            >
              {{ alarm.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>

    <!-- 设备详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="设备详情" width="70%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设备编码">{{
          currentEquipment.equipmentCode
        }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{
          currentEquipment.equipmentName
        }}</el-descriptions-item>
        <el-descriptions-item label="运行状态">
          <el-tag :type="getStatusType(currentEquipment.status)">
            {{ getStatusText(currentEquipment.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="运行时长">{{
          currentEquipment.runtime
        }}</el-descriptions-item>
        <el-descriptions-item label="温度"
          >{{ currentEquipment.temperature }}°C</el-descriptions-item
        >
        <el-descriptions-item label="转速"
          >{{ currentEquipment.speed }}RPM</el-descriptions-item
        >
        <el-descriptions-item label="负载"
          >{{ currentEquipment.load }}%</el-descriptions-item
        >
        <el-descriptions-item label="维保状态">{{
          currentEquipment.maintenanceStatus
        }}</el-descriptions-item>
      </el-descriptions>

      <div class="detail-charts">
        <!-- 这里放置详细图表 -->
        <div class="chart-placeholder">运行趋势图表</div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { ArrowUp, ArrowDown } from "@element-plus/icons-vue";

// 监控类型
const monitorType = ref("list");
const chartTimeRange = ref("today");

// 对话框控制
const detailDialogVisible = ref(false);
const currentEquipment = ref({});

// 获取状态样式
const getStatusType = (status) => {
  const statusMap = {
    running: "success",
    idle: "info",
    fault: "danger",
    maintenance: "warning",
    shutdown: "info",
  };
  return statusMap[status];
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    running: "运行中",
    idle: "空闲",
    fault: "故障",
    maintenance: "维护中",
    shutdown: "关机",
  };
  return statusMap[status];
};

// 获取报警类型
const getAlarmType = (level) => {
  const levelMap = {
    critical: "danger",
    warning: "warning",
    info: "info",
  };
  return levelMap[level];
};

// 查看详情
const handleDetail = (row) => {
  currentEquipment.value = row;
  detailDialogVisible.value = true;
};

// 处理报警
const handleAlarm = (row) => {
  ElMessage.warning(`处理设备 ${row.equipmentName} 的报警信息`);
};

// 数据总览
const overview = reactive({
  totalCount: 128,
  countTrend: 5.2,
  runningCount: 98,
  runningRate: 76.5,
  faultCount: 3,
  faultRate: 2.3,
  oeeValue: 85.6,
  oeeTrend: -1.2,
});

// 监控数据
const monitorData = ref([
  {
    equipmentCode: "EQ001",
    equipmentName: "数控车床",
    status: "running",
    runtime: "12h 30m",
    temperature: 45.2,
    speed: 1200,
    load: 75,
    maintenanceStatus: "正常",
  },
  {
    equipmentCode: "EQ002",
    equipmentName: "加工中心",
    status: "running",
    runtime: "8h 45m",
    temperature: 52.6,
    speed: 8000,
    load: 85,
    maintenanceStatus: "正常",
  },
  {
    equipmentCode: "EQ003",
    equipmentName: "三坐标测量仪",
    status: "idle",
    runtime: "2h 15m",
    temperature: 23.8,
    speed: 0,
    load: 0,
    maintenanceStatus: "待保养",
  },
  {
    equipmentCode: "EQ004",
    equipmentName: "空气压缩机",
    status: "fault",
    runtime: "5h 20m",
    temperature: 68.5,
    speed: 1750,
    load: 95,
    maintenanceStatus: "故障",
  },
  {
    equipmentCode: "EQ005",
    equipmentName: "工业机器人",
    status: "maintenance",
    runtime: "0h 0m",
    temperature: 25.0,
    speed: 0,
    load: 0,
    maintenanceStatus: "维护中",
  },
  {
    equipmentCode: "EQ006",
    equipmentName: "激光切割机",
    status: "running",
    runtime: "6h 15m",
    temperature: 38.4,
    speed: 2500,
    load: 65,
    maintenanceStatus: "正常",
  },
  {
    equipmentCode: "EQ007",
    equipmentName: "数控磨床",
    status: "running",
    runtime: "4h 40m",
    temperature: 42.8,
    speed: 3000,
    load: 70,
    maintenanceStatus: "正常",
  },
  {
    equipmentCode: "EQ008",
    equipmentName: "注塑机",
    status: "idle",
    runtime: "1h 30m",
    temperature: 35.2,
    speed: 0,
    load: 0,
    maintenanceStatus: "待检查",
  },
]);

// 报警信息列表
const alarmList = ref([
  {
    time: "2024-03-20 10:30:25",
    level: "critical",
    content: "空气压缩机温度过高，已超过警戒值",
  },
  {
    time: "2024-03-20 09:45:12",
    level: "warning",
    content: "加工中心主轴负载达到85%，请注意",
  },
  {
    time: "2024-03-20 09:15:30",
    level: "info",
    content: "数控车床即将达到保养周期",
  },
  {
    time: "2024-03-20 08:50:18",
    level: "warning",
    content: "工业机器人检测到异常振动",
  },
  {
    time: "2024-03-20 08:30:45",
    level: "info",
    content: "激光切割机气体压力偏低",
  },
]);

// 图表时间范围选项
const timeRangeOptions = [
  { label: "今日", value: "today" },
  { label: "本周", value: "week" },
  { label: "本月", value: "month" },
];

// 运行统计数据（实际项目中可能需要根据选择的时间范围动态获取）
const statisticsData = reactive({
  today: {
    labels: [
      "00:00",
      "03:00",
      "06:00",
      "09:00",
      "12:00",
      "15:00",
      "18:00",
      "21:00",
    ],
    running: [65, 70, 75, 85, 80, 85, 90, 85],
    idle: [25, 20, 15, 10, 15, 10, 5, 10],
    fault: [10, 10, 10, 5, 5, 5, 5, 5],
  },
  week: {
    labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    running: [75, 80, 85, 82, 78, 70, 65],
    idle: [20, 15, 10, 13, 17, 25, 30],
    fault: [5, 5, 5, 5, 5, 5, 5],
  },
  month: {
    labels: ["第1周", "第2周", "第3周", "第4周"],
    running: [78, 82, 80, 85],
    idle: [17, 13, 15, 10],
    fault: [5, 5, 5, 5],
  },
});

// 设备状态分布
const statusDistribution = reactive({
  running: 65,
  idle: 25,
  fault: 5,
  maintenance: 5,
});

// 温度阈值设置
const temperatureThresholds = {
  warning: 60,
  critical: 70,
};

// 负载阈值设置
const loadThresholds = {
  warning: 80,
  critical: 90,
};
</script>

<style scoped>
.equipment-monitoring-container {
  padding: 20px;
}

.data-overview {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  text-align: center;
}

.number {
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0;
}

.compare {
  font-size: 14px;
  color: #666;
}

.up {
  color: #67c23a;
}

.down {
  color: #f56c6c;
}

.rate {
  font-size: 14px;
  color: #666;
}

.monitor-section {
  margin-bottom: 20px;
}

.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 10px;
}

.grid-item {
  text-align: center;
  border: 1px solid #eee;
}

.grid-item.running {
  border-left: 4px solid #67c23a;
}

.grid-item.fault {
  border-left: 4px solid #f56c6c;
}

.grid-item.maintenance {
  border-left: 4px solid #e6a23c;
}

.grid-item.idle {
  border-left: 4px solid #909399;
}

.chart-card {
  margin-bottom: 20px;
}

.chart-container {
  height: 300px;
}

.alarm-card {
  margin-bottom: 20px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  color: #909399;
}

.detail-charts {
  margin-top: 20px;
  height: 300px;
}
</style>
